/*
 * @Author: Longfei.Du
 * @Date: 2019-07-19 15:38:49
 * @Last Modified by: Longfei.Du
 * @Last Modified time: 2019-07-26 14:28:45
 */
// 帧
import Frame from "./utils/Frame";
// 静态资源
import StaticResource from "./utils/StaticResource";
// 背景
import Background from './utils/Background'
import Pipe from "./pipe";
import Bird from './Bird';
import Scope from "./utils/Scope";
export default class Game {
  constructor(options) {
    // 1.获取id
    this.id = options.canvasId;
    // 2.canvas的提示
    /** @type {HTMLCanvasElement} */
    this.canvas = document.getElementById(this.id);
    // 3.获取屏幕宽高
    this.width = document.documentElement.offsetWidth;
    this.height = document.documentElement.offsetHeight;
    // 4.定时器
    this.timer = null;
    // 图片对象
    this.images = {}
    // 5.设置画布宽高
    this.canvas.setAttribute("width", this.width);
    this.canvas.setAttribute("height", this.height);
    // 6.获取上下文
    this.ctx = this.canvas.getContext("2d");
    // 7.获取帧工具
    this.frameUtil = new Frame();
    // 8.获取fps
    this.fps = this.frameUtil.realFps || 60;
    // 管道数组
    this.pipeArray = []
    let pipe = new Pipe();
    // 游戏结束状态
    this.gameOver = false;
    // pipe.init(this)
    // this.pipeArray.push(pipe)
    // 9.加载资源
    this.loadRes().then(()=>{
        // 开始游戏
        this.start()
    });
    // 游戏运行
    this.gameRun = null;
    
    
  }
  // 游戏运行
  start() {
    // 10.实例化背景
    this.createBg();
    // 创建小鸟
    this.bird = new Bird();
    this.bird.init(this);
    // 创建积分
    this.scope = new Scope(this);
    var self = this;
    function run(){
      if(!self.gameOver){
        self.mainLoop();
        requestAnimationFrame(run)
      }
    }
    self.gameRun = requestAnimationFrame(run)
    
  }
  
  // 主场景循环
  mainLoop() {
     // 1.清空画布
    this.ctx.clearRect(0, 0, this.width, this.height);
    
    // 循环背景
    this.loopBg();
    // 11.实例化管道
    this.createPipe();
    // 显示fps工具
    this.showFrame();
    // 小鸟飞起来
    this.flybird();
    // 积分
    this.scope.render()
  }
  // 加载资源
  loadRes() {
    return new Promise((resolve, reject) => {
      this.sr = new StaticResource();
      this.sr.loadResource("/resource.json",(currentLoadNum, total, imgObj) => {
          // 9.1 计算进度值
          let progress = Math.floor((currentLoadNum / total) * 100) + "%";
          console.log(progress);
          // 9.2 清屏
          this.ctx.clearRect(0, 0, this.width, this.height);
          this.ctx.beginPath()
          // 9.3 绘制进度
          this.ctx.font = "30px Arail";
          this.ctx.textAlign = "center";
          this.ctx.textBaseline = "middle";
          this.ctx.fillText("加载进度：" + progress,this.width / 2,this.height / 2);
          if(currentLoadNum===total){
              this.images = imgObj;
              resolve()
          }
        }
      );
    });
  }
  showFrame() {
    // 1.调用update
    this.frameUtil.update();
    // 2.绘制文字，显示fps
    this.ctx.beginPath()
    this.ctx.textAlign = "left";
    this.ctx.textBaseline = "middle";
    this.ctx.font = "16px Arail";
    this.ctx.fillText("FPS / " + this.frameUtil.realFps, 20, 20);
    this.ctx.fillText("FNO / " + this.frameUtil.currentFrame, 20, 40);
  }
  createBg(){
    // 房子
    this.fangzi = new Background({
      width:300,
      height:256,
      y:this.height-256-48,
      image:this.images.fangzi,
      speed:1
    });
    this.fangzi.bindCtx(this.ctx)
    // 地板
    this.diban = new Background({
      width:48,
      height:48,
      y:this.height-48,
      image:this.images.diban,
      speed:3
    });
    this.diban.bindCtx(this.ctx)
    // 树
    this.shu = new Background({
      width:300,
      height:216,
      y:this.height-216-48,
      image:this.images.shu,
      speed:2
    });
    this.shu.bindCtx(this.ctx)
  }
  createPipe(){
    // 根据帧数渲染管道创建频率
    if(this.frameUtil.currentFrame % 100 === 0 && !this.gameOver){
      let pipe = new Pipe();
      pipe.init(this)
      this.pipeArray.push(pipe)
    }
    this.pipeArray.forEach(item=>{
      item.render();
      item.update();
    })
  }

  loopBg(){
    // 房子
    this.fangzi.render();
    this.fangzi.update();
    // 地板
    this.diban.render();
    this.diban.update();
    // 数
    this.shu.render();
    this.shu.update();
  }
  flybird(){
    this.bird.render();
    this.bird.update();
    
  }
  // 游戏暂停
  reset() {}
  // 游戏暂停
  gameEnd(){
    this.gameOver = true;
    window.cancelAnimationFrame(this.gameRun)
  }
  pause() {
    // 背景停止移动
    this.fangzi.pause();
    this.diban.pause();
    this.shu.pause();
    // 管道停止移动
    for(let i =0 ;i<this.pipeArray.length;i++){
      this.pipeArray[i].pause();
    }
    this.bird.die = true;
    
  }
}
